<template>
  <el-row :gutter=20>
    <el-col :span='12' class="col">
      <form-info :formInput=customformInput :title=customtitle :buttonInfo=buttonInfo></form-info>
    </el-col>
    <el-col :span='12' style="min-height:200px;" class="col">
      <comp-table :showChart=false :tableData="tableData1"></comp-table>
      <improv-table :showChart=false :tableData="tableData2"></improv-table>
    </el-col>
  </el-row>
</template>
<script>
import FormInfo from './FormInfo.vue';
import TableInfo from './TableInfo.vue';
import CompTable from './CompTable.vue';
import ImprovTable from './ImprovTable.vue';

export default {
  components: {
    FormInfo,
    TableInfo,
    CompTable,
    ImprovTable
  },
  props: {
  },
  name: "Edge_Cloud",
  data() {
    return {
      customtitle: "算力配置",
      customformInput: [
        {
          title: "任务选择",
          isSelect: true
        }, {
          title: "配置文件",
          isSelect: false
        }, {
          title: "基准策略",
          isSelect: true
        }, {
          title: "优化算法",
          isSelect: true
        }
      ],
      buttonInfo: ["导入", "任务卸载"],
      tableData1: [
        { metrics: "平均响应时间", tValue: "0.974s" },
        { metrics: "平均能耗", tValue: "60w" },
        { metrics: "决策时间", tValue: " 121ms" },
      ],
      tableData2: [
        { metrics: "平均响应时间", tValue: "0.5844s", teval: "减少40%" },
        { metrics: "平均能耗", tValue: "57.3w", teval: "减少4.5%" },
        { metrics: "决策时间", tValue: "48ms", teval: "减少60%" },
      ]
    }
  }
};
</script>
<style lang='scss' scoped>
.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 0%;
  margin-bottom: 0;
}
</style>
